<template>
    <div class="detail_index" v-loading="detailstate.matchdetail.loading">
        <template v-if="detailstate.matchdetail.handicapmapData.length > 0">
            <div class="detail_header">
                <Tab />
            </div>
            <Details />
        </template>
        <template v-else>
            <app-none :size="120">
            </app-none>
        </template>

    </div>
</template>

<script setup>
import Tab from "./components/Tab.vue";
import Details from "./components/Details.vue";
const { detailstore, detailstate } = inject('detailSell')
</script>

<style lang="scss" scoped>
.detail_index {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.detail_header {
    display: flex;
    flex-direction: column;

    .navig {
        display: flex;
        align-items: center;
        font-size: 16px;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 4px;

        .item {
            cursor: pointer;
        }
    }
}
</style>